import styles from './index.less';
import { useState } from 'react';
import { Input, Button, Row } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { post } from '@/utils/request';
import { useRequest } from 'umi';
import { history } from 'umi';
import { ApiReturn } from '@/types/global';
class Retren {
  token?: string;
}

const login = (user_name: string, password: string): ApiReturn<Retren> => {
  return post('/v1/auth/token', {
    user_name,
    user_id: password,
  });
};

export default function IndexPage() {
  const [user_id, setUserId] = useState('');
  const [user_name, setUsername] = useState('admin');
  const loginFunc = useRequest(login, {
    manual: true,
    onSuccess: (data) => {
      if (data) {
        console.log(data);
        const { token } = data;
        window.localStorage.setItem('token', String(token));
        history.push('/mp');
      }
    },
  });

  return (
    <div className={styles.loginContainer}>
      <div className={styles.loginForm}>
        <Row>
          <div className={styles.title}>K8S-ADMIN</div>
        </Row>
        <Row>
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="请输入账户"
            value={user_name}
            onChange={(e) => setUsername(e.target.value)}
          ></Input>
        </Row>
        <Row>
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="请输入密码"
            value={user_id}
            onChange={(e) => setUserId(e.target.value)}
          ></Input>
        </Row>
        <Row>
          <Button
            className={styles.loginBtn}
            type="primary"
            onClick={() => loginFunc.run(user_name, user_id)}
          >
            登录
          </Button>
        </Row>
      </div>
    </div>
  );
}
